<template>
  <div class="main">
    <div class="mbt">全部订单 待付款 待收货 待评价 | 我的常购商品</div>
    <el-row class="bt">
      <el-col :span="3">
        近三个月订单
        <i class="el-icon-arrow-down"></i>
      </el-col>
      <el-col :span="9">订单详情</el-col>
      <el-col :span="3">收货人</el-col>
      <el-col :span="3">金额</el-col>
      <el-col :span="3">
        全部状态
        <i class="el-icon-arrow-down"></i>
      </el-col>
      <el-col :span="3">操作</el-col>
    </el-row>
    <div class="order" v-for="dt in orderList" :key="dt.no">
      <div class="od-bt">{{dt.time}} 订单号：{{dt.no}}</div>
      <el-row class="info">
        <el-col :span="2" class="lr">
          <img :src="dt.url" />
        </el-col>
        <el-col :span="6" class="lr">{{dt.name}}</el-col>
        <el-col :span="2">x{{dt.num}}</el-col>
        <el-col :span="2">申请售后</el-col>
        <el-col :span="3">{{dt.buyer}}</el-col>
        <el-col :span="3">总额:￥{{dt.total}}</el-col>
        <el-col :span="3">{{dt.state}}</el-col>
        <el-col :span="3">
          <p>订单详情</p>
          <p>查看票据</p>
        </el-col>
      </el-row>
    </div>&nbsp;
  </div>
</template>
<script>
export default {
    data(){
        return {
            orderList:[
                {
                    id:1,
                    no:106148938679,
                    time:'2019-10-29 20:00:01',
                    url:'http://yf.401520.com/product/3/5/27f0e1a59e564e0b8417f3d91265a17f.jpg',
                    name:'暖场礼品 森活硅藻土环保快速吸水杯垫（100起发）',
                    num:100,
                    buyer:'徐刚',
                    total:800.00,
                    state:'已完成'
                },                
                {
                    id:2,
                    no:106148938621,
                    time:'2019-10-29 18:20:56',
                    url:'http://yf.401520.com/product/4/5/a423a9d2a44a42498aa3915f211db883.jpg',
                    name:'啄木鸟 家纺枕头plover枕头泰国乳胶颗粒枕（两只）',
                    num:1,
                    buyer:'徐刚',
                    total:156.00,
                    state:'已完成'
                }
            ],
        };
    },
}
</script>
<style lang="scss" scoped>
.main {
    color:rgb(75, 75, 75);
  background: white;
  .mbt{
      padding:10px 0 0 10px;
  }
}
.main .bt {
  margin: 20px;
  text-align: center;
  line-height: 30px;
  background: rgb(238, 238, 238);
}

.main .order {
  margin: 20px;
  border: 1px solid rgb(221, 220, 220);
}
.main .order .od-bt {
  padding: 5px 20px;
  background: rgb(238, 238, 238);
}
.main .order .info {
  padding: 15px 0;
  text-align: center;
}
.lf {
  text-align: left;
}
</style>